<template>
	<view>
		<view class="header_txt">
			<view class="dateTime">
				<image class="times" src="/static/image/calendar.png" mode="aspectFit"></image>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="date" @change="getDateTimes" />
				
			</view>
		</view>
		<view class="whole" v-if="yaoshang==null">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view class="wholes" v-if="yaoshang!=null">
			<view class="varietyOfDishess" v-for="(items,indexd) in yaoshang " :key="indexd">
				<view class="tops">
					<image class="image_peoples" src="../../../static/image/speaker.png" mode="aspectFit"></image>
					<view class="names">
						<!-- <view class="view_name">
							<text class="text_names">{{items.name}}</text>
						</view> -->
						<view class="view_xn">
							<text class="text_xns"><text class="text_names">{{items.name}}</text>先生\女士的{{items.partText}}菜品有{{items.dietLabProds}}的食物，会影响老人的健康</text>
						</view>
					</view>
					<view class="drop"   @click="dropdown(indexd)">
						<image v-if="items.drops==true" class="drop-down" src="../../../static/image/drop-down.png"
							mode="aspectFit"></image>
						<image v-if="items.drops==false" class="drop-down" src="../../../static/image/icon-pullup.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="items.drops==false" class="center_cms" v-for="(item,index) in items.detailList " :key="index">
					<view class="cm__reds" v-if="item.status==1">
						<text class="text">{{item.dishName}}</text>
						<text class="text2">{{item.labProd}}</text>
					</view>
					<view class="cms" v-if="item.status==0">
						<text class="texts">{{item.dishName}}</text>
					</view>
				</view>

				<view v-if="items.status==1" class="confirms">
					<text>{{items.createTime}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Width: '',
				yaoshang: '',
				dataCode: '',
				idCard: '',
				drop:true,
			}
		},
		onLoad: function() {
			this.getDate();
			this.idCard = uni.getStorageSync('idCard');
			this.onSocketMessage()
			this.getWidth()
			this.HistoricalRecords()
		},
		methods: {
			//历史记录列表
			async HistoricalRecords() {
				console.log(this.idCard)
				const res = await this.$ssgwRequest({
					url: '/api-baiyun/healthNotify/',
					method: "get",
					data: {
						createDate:this.date,
						idcard: this.idCard,
					},
				})
				if (res.success == true) {
					this.yaoshang = res.data.data
					if (this.yaoshang != null) {
					for (let i = 0; i < this.yaoshang.length; i++) {
						this.yaoshang[i].drops = true
					}
					}
					console.log(this.yaoshang)
				}
			},
			//获取屏幕宽度
			getWidth() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.Width = res.windowWidth;
					},
				});
				console.log(that.Width)
			},
			onSocketMessage() {
				uni.onSocketMessage(res => {
					const data = JSON.parse(res.data)
					// console.log(JSON.parse(res.data));
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
							if (data.msg != 'ping') {
								getApp().globalData.getSocketMsg(res.data);
								if (data.msgType ==
									"com.core.healthNotify.controller.HealthNotifyController.health.notice") {
									// console.log(JSON.parse(res.data));
									this.HistoricalRecords()
								}
							}
						}
					}
				});
			},
			dropdown(indexd) {
				if(this.yaoshang[indexd].drops==false){
					 this.$set(this.yaoshang[indexd], 'drops', !this.yaoshang[indexd].drops);
				}else{
					 this.$set(this.yaoshang[indexd], 'drops', !this.yaoshang[indexd].drops);
				}
			     this.$forceUpdate();
			},
			//获取当天日期
			getDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month < 10 ? "0" + month : month;
				this.date = year + '-' + month + '-' + day;
			},
			//获取选择的日期
			getDateTimes(e) {
				this.date = e;
				
				this.HistoricalRecords();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;
	
		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}
	.wholes {
		// background:url(../../../static/image/yanshang.png);
		// height: 100vh;
		// background-repeat: no-repeat;
		// background-size: 100%;
		display: flex;
		// flex: 1;
		flex-wrap: wrap;
		text-align: center;
		justify-content: flex-start;
		// flex-direction: row;
		padding-bottom: 5%;
		// background-color: #109EF8;
	}


	.tips {
		margin: 0 5% 10% 5%;
		text-align: left;
		font-size: 16px;

		.tips_text {
			.proposal {
				color: #A6E65F;
				margin: 0 2%;
			}
		}

		.tips_text_red {
			.proposal_red {
				color: #ff0000;
				margin: 0 2% 20% 2%;
			}
		}
	}



	.varietyOfDishess {
		margin: 5% 5% 0 5%;
		width: 90%;
		// height: 400rpx;
		border-radius: 10px;
		padding-top: 20rpx;
		background-color: #FFFFFF;
	}

	.tops {
		margin: 0 5%;
		width: 90%;

		border-bottom: 1px solid #B8B8B8;
		display: flex;

		.image_peoples {
			margin-top: 10rpx;
			width: 80rpx;
			height: 60rpx
		}

		.names {
			margin-top: 13rpx;
			height: 80rpx;
			display: flex;
			text-align: center;
			width: 80%;
			// .view_name {
			// 	.text_names {
			// 		font-size: 18px;
			// 	}

			// }

			.view_xn {
				.text_names{
					font-size: 20px;
				}
				line-height: 1em;
				.text_xns {
					// margin-left: 5rpx;
					font-size: 8px;
				}

			}

		}
		.drop{
			width: 10%;
			margin-top: 20rpx;
			// background-color: #007AFF;
			.drop-down {
				// background-color: #007AFF;
				width: 90%;
				height: 60rpx;
			}
		}
	}


	.center_cms {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		// justify-content: space-around;
		flex-direction: row;
		margin: 3% 5%;
	}

	.cms {
		margin-right: 20rpx;
		border: 1px solid #A6E65F;
		padding: 0 5rpx;
		border-radius: 4px;
		font-size: 20px;

		.texts {}
	}

	.cm__reds {
		margin-right: 20rpx;
		padding: 0 5rpx;
		font-size: 20px;

		.text {
			border: 1px solid #ff0000;
			background-color: #ff0000;
			border-radius: 4px;
		}

		.text2 {
			margin-left: 10rpx;
			background-color: #ffaa00;
			border-radius: 4px;
		}
	}

	.tipss {
		margin: 0 5% 0% 5%;
		text-align: left;
		font-size: 13px;

		.tips_texts {
			.proposals {
				color: #A6E65F;
				margin: 0 5rpx;
			}
		}

		.tips_text_reds {
			.proposal_reds {
				color: #ff0000;
				margin: 0 5rpx;
			}
		}
	}

	.confirms {
		// background-color: #007AFF;
		margin: 0% 5% 4% 5%;
		width: 90%;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 3px;
		font-size: 20px;
		// background-color: #F5A623;
		text-align: right;

		text {
			font-size: 0.6em;
			// color: #FFFFFF;
		}
	}
	.header_txt {
				width: 100%;
				height: 90rpx;
	
				.dateTime {
					width: 100%;
					position: fixed;
					text-align: center;
					z-index: 99;
	
	
					.times {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						top: 50%;
						left: 30%;
						transform: translateY(-50%);
						z-index: 1;
					}
	
				}
			}
	
	
</style>
